<template>
  <div class="container">
    <VerticalLayout :isSearchCollapsed="isSearchCollapsed">
      <template #filters>
        <!-- 客服 -->
        <FilterForm role="service" @change="filterChange" />
      </template>
      <!-- 插入搜索组件 -->
      <template #search>
        <el-space alignment="flex-start">
          <el-switch
            v-model="isSearchCollapsed"
            active-color="#13ce66"
            inactive-color="#ff4949"
            inline-prompt
            active-text="展开"
            inactive-text="收起"
          ></el-switch>
          <!-- 表单 -->
          <DynamicQueryForm
            :show-match-range="true"
            :extra-fields="extraField"
            :columns-values="columnsValues"
            @submit="onSubmit"
          />
        </el-space>
      </template>

      <!-- 插入表格组件 -->
      <template #table>
        <CustomTable
          ref="customTableRef"
          :actions="listComplaint"
          :columns="columns"
          show-selection
          show-pagination
        >
          <!-- 左边功能 -->
          <template #action-left> </template>

          <!-- 右边功能 -->
          <template #action-right>
            <!-- <el-button :icon="Refresh" circle /> -->
          </template>

          <template #table-top> </template>

          <template #orderSlot="{ row }">
            <RowSlots slotName="orderSlot" :row="row" />
          </template>
          <!-- 收货人信息 -->
          <template #logisticsSlot="{ row }">
            <RowSlots slotName="logisticsSlot" :row="row" @payHistory="payHistory" />
          </template>

          <!-- 业务员信息 -->
          <template #salesmanSlot="{ row }">
            <RowSlots slotName="salesmanSlot" :row="row" />
          </template>

          <!-- 类别 -->
          <template #categorySlot="{ row }">
            <RowSlots slotName="categorySlot" :row="row" />
          </template>

          <!-- 物流信息 -->
          <template #logisticsStatusSlot="{ row }">
            <RowSlots slotName="logisticsStatusSlot" :row="row" />
          </template>

          <!-- 下单/签收时间 -->
          <template #orderTimerSlot="{ row }">
            <RowSlots slotName="orderTimerSlot" :row="row" />
          </template>

          <template #wechatSlot="{ row }">
            <RowSlots slotName="wechatSlot" :row="row" />
          </template>

          <!-- 备注 -->
          <template #remarkSlot="{ row }">
            <RowSlots
              slotName="remarkSlot"
              :row="row"
              @showCustomerFollowUp="showCustomerFollowUp"
            />
          </template>

          <!-- 操作 -->
          <template #operationSlot="{ row }">
            <el-dropdown
              trigger="click"
              placement="bottom-end"
              @command="(cmd: any) => handleCommand(cmd, row)"
            >
              <el-button type="primary" text size="small">
                <el-icon><Setting /></el-icon>
                设置
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- 置顶 或 取消置顶（根据状态切换） -->
                  <el-dropdown-item v-if="+row.cTopStatus === 2" :icon="Top" command="top">
                    置顶
                  </el-dropdown-item>
                  <el-dropdown-item v-else :icon="SemiSelect" command="cancelTop" :danger="true">
                    取消置顶
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </CustomTable>
      </template>
    </VerticalLayout>
    <!-- 筛选弹窗 -->
    <FilterTable ref="filterTableRef" />
    <!-- 跟进详情 -->
    <CustomerFollowUp ref="customerFollowUpRef" @ok="customTableRef?.refresh" />
    <!-- 平台订单查看，编辑弹窗 -->
    <PlatformAddOrder
      :logisticsCompany="logisticsCompany"
      :payType="payType"
      @ok="customTableRef?.refresh"
      ref="platformAddOrderRef"
    />
    <!-- 批量下发 -->
    <BatchAllocations
      ref="batchAllocationRef"
      :logisticsCompany="logisticsCompany"
      :users="users"
      :sysSelfFulfillmentOgistics="sysSelfFulfillmentOgistics"
      :logisticsTypeOptions="logisticsTypeOptions"
      @ok="customTableRef?.refresh"
    />
    <!-- 用户下单记录 -->
    <CustomerOrderHistory ref="customerOrderHistoryRef" />
    <!-- 置顶弹窗 -->
    <TopDialog ref="topDialogRef" @ok="customTableRef?.refresh" />
    <!-- 单张打印 -->
    <SinglePrintDialog
      :logisticsCompany="logisticsCompany"
      :payType="payType"
      :logisticsTypeOptions="logisticsTypeOptions"
      :sysSelfFulfillmentOgistics="sysSelfFulfillmentOgistics"
      @ok="customTableRef?.refresh"
      ref="singlePrintDialogRef"
    />
    <!-- 批量打印 -->
    <BatchPrintDialog :logisticsCompany="logisticsCompany" ref="batchPrintDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { Top, SemiSelect, Setting } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { listComplaint } from '../../../api/platformOrders/orders/list';
import { columns } from './columns';
import { cloneDeep } from 'lodash';
import { onMounted, ref } from 'vue';
import { extraField, columnsValues } from './searchOptions';
import { useCustomStore } from '../../../store/modules/custom';
import { useDict } from '../../../utils/dict';
import { useYw } from '../../../hooks/useYw';
import { useFilterSearch } from '../../../hooks/useFilterSearch';

const customStore = useCustomStore();
const isSearchCollapsed = ref(false);
// table
const customTableRef = ref();
// 筛选
const filterTableRef = ref();
// 跟进详情
const customerFollowUpRef = ref();
// 平台订单编辑/查看
const platformAddOrderRef = ref();
// 批量下发
const batchAllocationRef = ref();
// 用户下单记录
const customerOrderHistoryRef = ref();
// 指定弹窗
const topDialogRef = ref();
// 批量打印
const batchPrintDialogRef = ref();
// 单张打印
const singlePrintDialogRef = ref();

/** 下发人可根据实际数据替换 */
const { ywList: users } = useYw();

// 统一管理search
const { filterChange, onSubmit } = useFilterSearch(customTableRef);

// 字典集合
const {
  sys_logistics_company: logisticsCompany,
  sys_pay_type: payType,
  sys_self_fulfillment_ogistics: sysSelfFulfillmentOgistics, // 第三方快递
  sys_logistics_type: logisticsTypeOptions // 物流类型
} = useDict(
  'sys_logistics_company',
  'sys_pay_type',
  'sys_goods_type',
  'sys_self_fulfillment_ogistics',
  'sys_logistics_type'
);

// 显示跟踪备注
const showCustomerFollowUp = (row: any, typeCode: number) => {
  customerFollowUpRef.value?.show(row, typeCode);
};

// 查看订单记录
const payHistory = (row: any) => {
  customerOrderHistoryRef.value?.show(row);
};

const onEdit = (data: any, type: any) => {
  platformAddOrderRef.value.show(data, type);
};

// 处理菜单点击
const handleCommand = (command: string, row: any) => {
  switch (command) {
    case 'top':
      topDialogRef.value.show(row);
      break;
    case 'cancelTop':
      topDialogRef.value.cancelTop(row);
      break;
    default:
      break;
  }
};

onMounted(() => {
  // 初始化类别数据
  customStore.initCustom();
});
</script>

<style scoped lang="scss">
.container {
  padding: 16px;

  .productName {
    font-weight: bold;
  }

  .alertFpBtn {
    padding-left: 0;
    padding-right: 0;
  }

  .payCount {
    cursor: pointer;
  }

  .remarkBox {
    .newReamark {
      display: block;
      text-wrap: wrap;
      text-align: left;
      line-height: 18px;
      font-size: 13px;
      margin-bottom: 5px;
    }
  }
}
</style>
